<template>
  <div class="Pchangephon2">
    <Pheader class="tou" msg="换绑手机"></Pheader>
    <div class="changeTTMinTwo">
      <div class="changeTitle">
        <span class="changeTitleOne" :style="one">1.验证原手机号</span>
        <span class="changeTitleTwo" :style="two">2.验证新手机号</span>
        <span class="changeTitleThree" :style="three">3.换绑手机</span>
      </div>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="tel">
          <el-input
            type="tel"
            placeholder="请输入新手机号"
            v-model="ruleForm.tel"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item prop="validate">
          <el-input
            class="aric-yanzheng yanzheng"
            placeholder="验证码"
            type="text"
            v-model="ruleForm.validate"
          ></el-input>
          <div class="login-code" @click="refreshCode">
            <Identify :identifyCode="identifyCode"></Identify>
          </div>
          <el-button @click="refreshCode" type="text" class="textbtn">看不清，换一张</el-button>
        </el-form-item>
        <el-form-item>
          <el-input type="text" placeholder="手机验证码"></el-input>
          <el-button :disabled="disabled" class>{{btntxt}}</el-button>
        </el-form-item>
        <el-form-item>
          <router-link to="/home/P_material/P_changephon3">
            <el-button type="warning" @click="submitForm('ruleForm')" class="changeSub">提交验证</el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//头部小组件
import Pheader from "@/components/P_header.vue";
// 验证码组件
import Identify from "../components/sidentity.vue";
import Qs from "qs";
export default {
  components: {
    Pheader,
    Identify
  },
  data() {
    var validateTel = (rule, value, callback) => {
      if (!value) {
        return new Error("请输入电话号码");
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        const isPhone = reg.test(value);
        value = Number(value); //转换为数字
        if (typeof value === "number" && !isNaN(value)) {
          //判断是否为数字
          value = value.toString(); //转换成字符串
          if (value.length < 0 || value.length > 12 || !isPhone) {
            //判断是否为11位手机号
            callback(new Error("手机号码格式如:138xxxx8754"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请输入电话号码"));
        }
      }
    };
    const validateVerifycode = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入验证码"));
      } else if (value != this.identifyCode) {
        window.console.log("validateVerifycode:", value);
        this.ruleForm.validate = "";
        this.refreshCode();
        callback(new Error("验证码不正确!"));
      } else {
        callback();
      }
    };
    return {
      btntxt: "获取验证码",
      disabled: false,
      time: 0,
      identifyCodes: "123456789",
      identifyCode: "",
      one: {
        backgroundImage:
          "url(" + require("../assets/images/bound/bound4.jpg") + ") ",
        backgroundPosition: "center center",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      two: {
        backgroundImage:
          "url(" + require("../assets/images/bound/bound5.jpg") + ") ",
        backgroundPosition: "center center",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      three: {
        backgroundImage:
          "url(" + require("../assets/images/bound/a3.png") + ") ",
        backgroundPosition: "center center",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      ruleForm: {
        tel: "",
        validate: ""
      },
      rules: {
        tel: [
          {
            validator: validateTel,
            trigger: "blur"
          }
        ],
        validate: [
          {
            validator: validateVerifycode,
            required: true,
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    // 初始化验证码
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    //图片验证
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    submitForm(formName) {
      let _this = this;
      let User = document.getElementsByTagName("input");
      this.$refs[formName].validate(valid => {
        if (valid) {
          //   var userphone=localStorage.getItem("userphone")
          let data = Qs.stringify({
             phone: User[1].value,
             id:_this.$route.query.userid
              });
          window.console.log(User[1].value);
          this.$axios({
            method: "post",
            url: "http://localhost:3000/recentlook/changeTelTwo",
            data: data,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
            .then(response => {
              _this.list = response.data.result;
              _this.code = response.data.code;
              if (_this.code == 200) {
                _this.$router.push({ name: "P_changephon3" });
              }
            })
            .catch(function(error) {
              _this.data = error;
              alert("error submit!!");
            });
        } else {
          window.console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style>
.Pchangephon2 {
  width: 100%;
  height: 488px;
  border: 1px solid #e7e7e7;
  /* margin-left:1%; */
  position: absolute;
  top: 0px;
  left: 0px;
  background: #fff;
  overflow: hidden;
  z-index: 2;
}
.Pchangephon2 .tou {
  padding: 10px 13px;
  border-bottom: 1px solid #e7e7e7;
}
.changeTTMinTwo {
  padding: 40px;
}
.changeTitle {
  margin-bottom: 40px;
}
.changeTitle span {
  width: 233px;
  height: 42px;
  display: inline-block;
  color: #333;
  font-size: 17px;
  line-height: 42px;
  text-align: center;
}
.changeTitle .changeTitleTwo {
  color: #fff;
}
.changeTTMinTwo .el-input input {
  width: 30%;
  height: 44px;
  background: #f9f9f9;
}
.changeTTMinTwo .el-input__inner {
  border-radius: 0;
}
.changeTTMinTwo .el-form-item__content {
  margin-left: 35px !important;
}

.changeTTMinTwo .aric-yanzheng {
  display: inline-block;
  width: 10% !important;
  float: left;
}

.changeTTMinTwo .aric-yanzheng input {
  width: 100%;
}

.changeTTMinTwo .login-code {
  float: left;
}

.changeTTMinTwo .el-button--text {
  color: #4b943d !important;
}
.changeTTMinTwo .el-button--default {
  background-color: #498e3d;
  font-size: 12px;
  position: absolute;
  top: 6px;
  left: 19%;
  border-radius: 0;
  height: 32px;
  padding: 8px 13px;
  color: #fff;
}
.changeTTMinTwo .changeSub {
  background-color: #f08200;
  margin-bottom: 118px;
}
.changeTTMinTwo .el-button--default {
  left: 192px;
}
</style>
